<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <span>
          <b class="u-f-16">支付信息列表</b>
        </span>
      </div>

      <el-form :inline="true" :model="queryForm" size="small" class="u-text-center">
        <el-form-item label="订单状态">
          <el-select v-model="queryForm.status" clearable @change="handleChange">
            <el-option label="全部" value="-1"></el-option>
            <el-option label="未支付" value="0"></el-option>
            <el-option label="已支付(提现)" value="1"></el-option>
            <el-option label="已退款" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付时间">
          <el-date-picker
            v-model="queryForm.time_section"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="queryForm.keyword" placeholder="支付单号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getPageData(true)">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" class="u-mt-10" v-viewer>
        <el-table-column label="id" prop="id" width="50"></el-table-column>
        <el-table-column label="支付类型" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pay_type=='pay'" type="success">订单支付</el-tag>
            <el-tag v-if="scope.row.pay_type=='refund'">订单退款</el-tag>
            <el-tag v-if="scope.row.pay_type=='recharge'">余额充值</el-tag>
            <el-tag v-if="scope.row.pay_type=='member'">会员缴费</el-tag>
            <el-tag v-if="scope.row.pay_type=='agency'">群主进货</el-tag>
            <el-tag v-if="scope.row.pay_type=='extract'">微信提现</el-tag>
            <el-tag v-if="scope.row.pay_type=='deposit'">缴纳保证金</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="提现类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.extract==0" type="info">正常订单</el-tag>
            <el-tag v-if="scope.row.extract==1" type="warning">用户提现</el-tag>
            <el-tag v-if="scope.row.extract==2" type="success">群主提现</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" prop="order_sn"></el-table-column>
        <el-table-column label="支付单号" prop="pay_sn"></el-table-column>
        <el-table-column label="金额" prop="total"></el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==0" type="info">未支付</el-tag>
            <el-tag v-if="scope.row.status==1" type="success">已支付{{scope.row.extract>0?"(提现)":""}}</el-tag>
            <el-tag v-if="scope.row.status==2">已退款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="支付类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pay_mode=='weixin'" type="info">微信支付</el-tag>
            <el-tag v-if="scope.row.pay_mode=='balance'" type="info">余额支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="支付时间" prop="pay_time_str" sortable></el-table-column>
        <el-table-column label="添加时间" prop="add_date" sortable></el-table-column>
      </el-table>

      <div class="u-mt-20 u-text-center">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import commonPage from "@/mixins/common-page";
export default {
  mixins: [commonPage],
  data() {
    return {
      apiName: "order",
      apiPage: "payPage",
      queryForm: {
        time_section: "", //下单时间区间
        status: "",
        keyword: "",
      },
    };
  },
  methods: {
    handleChange() {
      this.getPageData(true);
    },
  },
};
</script>
